<template>
  <div>
    <g-notice left-icon="volume-o" text="GroupUI-VUE3.0组件正在火热开发中，欢迎有经验的童鞋一起加入进来，QQ群号：（1059695979）"></g-notice>
    <div class="group">
      <img src="../assets/logo.jpg" />
      <h2 >VUE3组件</h2>
    </div>
    <div class="group-main">
      <g-cell-group title="基础组件">
        <g-cell to="/button" isLink title="按钮"></g-cell>
        <g-cell to="/cell" isLink title="单元格"></g-cell>
        <g-cell to="/icon" isLink title="图标"></g-cell>
        <g-cell to="/layout" isLink title="Layout布局"></g-cell>
        <g-cell to="/toast" isLink title="轻提示"></g-cell>
      </g-cell-group>
      <g-cell-group title="表单组件">
        <g-cell to="/switch" isLink title="switch"></g-cell>
      </g-cell-group>
      <g-cell-group title="反馈组件">
        <g-cell to="/overlay" isLink title="overlay"></g-cell>
      </g-cell-group>
      <g-cell-group title="展示组件">
        <g-cell to="/notice" isLink title="通知栏"></g-cell>
        <g-cell @click="show('~努力开发中~')" isLink title="circle"></g-cell>
      </g-cell-group>
      <g-cell-group title="导航组件">
        <g-cell to="/tabbar" isLink title="tabbar标签栏"></g-cell>
      </g-cell-group>
      <g-cell-group title="业务组件"></g-cell-group>
    </div>
    <g-tabbar route :active="active">
        <g-tabbar-item  to="/" icon="shouye">首页</g-tabbar-item>
        <g-tabbar-item to="/icon" icon="dingdan">图标</g-tabbar-item>
        <g-tabbar-item  to="/button" icon="zantong">按钮</g-tabbar-item>
        <g-tabbar-item to="/cell"  icon="leimu">单元格</g-tabbar-item>
    </g-tabbar>
  </div>
</template>
<script>
import { Toast } from "@/group/utils";
import test from './test'
export default {
  data(){
   return{
      active:0,
      sss:'1'
   }
  },
  components:{
    test
  },
  setup(props, { attrs, emit, slots }) {
    const show = function(msg) {
      Toast.show(msg);
    };
    return { show };
  }
};
</script>
<style lang="scss"  scoped>
@keyframes fontColor {
  0% {
    color: #34485f;
    top: -30px;
  }
  25% {
    color: #3ab982;
    top: -40px;
  }
  50% {
    color: #344860;
    top: -30px;
  }
  75% {
    color: #3ab982;
    top: -40px;
  }
  100% {
    color: #34485f;
    top: -20px;
  }
}
.group {
  width: 690px;
  margin: 20px auto;
  background: #fff;
  padding: 10px 0;
  padding-top: 20px;
  overflow: hidden;
  h2 {
    text-align: center;
    animation: fontColor 1.5s ease-in-out infinite;
    font-size: 50px;
    position: relative;
    top: -20px;
  }
  img {
    display: block;
    width: 300px;
    height: 200px;
    margin: 0 auto;
  }
}
.group-main {
  height: 61vh;
  overflow-y: scroll;
}
</style>